<template>
  <div class="container">

    <div class="container-box">
      <img src="@/assets/center1.png" class="center1" alt="">
      <img src="@/assets/center2.png" class="center2">
      <div class="center-text">
        <div class="center-item">
          <div class="item-num green">
            156
          </div>
          <div class="item-text">
            核心业务
          </div>
        </div>
          <img src="@/assets/line.png" alt="">

        <div class="center-item">
          <div class="item-num blue">
            98
          </div>
          <div class="item-text">
            一图两清单
          </div>
        </div>
        <img src="@/assets/line.png" alt="">

        <div class="center-item">
          <div class="item-num green">
            5
          </div>
          <div class="item-text">
            三张清单
          </div>
        </div>
        <img src="@/assets/line.png" alt="">

        <div class="center-item">
          <div class="item-num blue">
            8
          </div>
          <div class="item-text">
            数据字典
          </div>
        </div>



      </div>
    </div>

  </div>
</template>
  





<style lang="less" scoped >
.container {
  width: 100%;

  color: #fff;
}

.container-box {
  width: 100%;
  height: 100px;
  background: url('@/assets/centerTitle.png') no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  padding: 0 65px;
  box-sizing: border-box;

}

.center1 {
  position: absolute;
  top: 12px;
  left: 50px;
}

.center2 {
  position: absolute;
  right: 40px;
  bottom: 12px;
}

.center-text {
  width: 100%;
  height: 100px;
  display: flex;

  .center-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .item-num{
      font-size: 28px;
      font-weight: 600;
    }
    .item-text{
      font-size: 20px;
      color: #fff;
 
    }
  }
}
.green{
  color: rgb(105, 255, 196);
}
.blue{
  color:rgb(59, 176, 238)
}
</style>
  